// Popup.tsx
import React, {JSX} from 'react';
import {View, Icon} from '@tarojs/components';
import './index.scss';

interface IProps {
  isOpened: boolean;
  onClose?: () => void;
  onOverlay?: () => void;
  title: string;
  children: JSX.Element;
  customHeader?: JSX.Element;
  customStyle?: { [key: string]: string };
}

const Popup: React.FC<IProps> = ({isOpened, onClose, title, customHeader, onOverlay, customStyle, children}) => {
  const renderHeaderEle = customHeader ? customHeader : (
    <View className='layout-header'>
      {title}
      <Icon onClick={onClose} size='20' type='clear' className='close-img'/>
    </View>
  );

  return (
    <View className={isOpened ? 'float-layout active' : 'float-layout'}>
      <View className='float-layout__overlay' onClick={onOverlay}></View>
      <View className='float-layout__container layout'>
        {renderHeaderEle}
        <View className='layout-body' style={customStyle}>
          {children}
        </View>
      </View>
    </View>
  );
};

export default React.memo(Popup);
